<template>
<div>
  <div v-show="certificateListVisible" class="mod-config">
    <div class="div-s">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
           <el-form-item label="录入类型">
            <el-select v-model="params.certificateType">
              <el-option
                v-for="item in certificateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="状态">
            <el-select v-model="params.status">
              <el-option
                v-for="item in statuses"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="姓名">
            <el-input v-model="params.name" clearable placeholder="请填写姓名"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="身份证号">
            <el-input v-model="params.idCard" clearable placeholder="请填写身份证号"></el-input>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" :span="6">
      <el-form-item label="手机号">
            <el-input v-model="params.mobile" clearable placeholder="请填写手机号"></el-input>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item label="学历">
            <el-select v-model="params.academic" placeholder="请选择学历">
                <el-option
                  v-for="item in academics"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item label="证书类型">
            <el-select v-model="params.pidType" filterable placeholder="请选择证书类型" @change="jobChange">
              <el-option
                v-for="item in editableTabs"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="证书类别">
            <el-select v-model="params.idType" filterable placeholder="请选择证书类别" @change="confChange">
              <el-option
                v-for="item in confInfos"
                :key="item.id"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" :span="6">
      <el-form-item label="证书专业">
            <el-select v-model="params.profession" placeholder="请选择证书专业">
                <el-option
                  v-for="item in professions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="concealName" :span="6">
      <el-form-item label="保管部门">
            <el-tree-select
              style="width:100%"
              :data="treeData"
              v-model="params.keepDeptId"
              node-key="id"
              placeholder="请选择保管部门"
            />
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
          <el-form-item label="证书编号">
            <el-input v-model="params.certificateNo" clearable placeholder="请填写证书编号"></el-input>
          </el-form-item>
      </el-col>
      <el-col :class='{"col-right":userCol ==1,"col-center":userCol ==2}' v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="发证日期">
          <el-date-picker type="date" v-model="params.releaseTime" placeholder="请选择发证日期" :picker-options="pickerOptionsValidityEndTimeA" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col :class='{"col-essss":userCol ==1,"col-right":userCol ==2}' v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="到期日期">
            <el-date-picker type="date" v-model="params.validityEndTime" @blur="blurValidityEndTime" placeholder="请选择到期日期" :picker-options="pickerOptionsValidityEndTime" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
        <el-form-item label="是否注册">
          <el-select v-model="params.registerType" placeholder="请选择证书是否注册" style="width:100%">
                <el-option
                  v-for="item in registerTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
      </el-form-item>
        </el-col>
        <el-col v-if="concealNameCol" :span="6">
        <el-form-item>
      </el-form-item>
        </el-col>
      <el-col v-if="conceal" :span="6">
        <el-form-item>
      </el-form-item>
        </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button v-if="isAuth('certificate:certificateRenewalInfo:info')" class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button v-if="isAuth('certificate:certificateRenewalInfo:info')" class="buttonItem" size="mini" type="primary" @click="clickDataFormSubmit()">搜 索</el-button>
      <el-button style="color:#6E92E9;" v-if="unfold" @click="clicKunfold()" type="text">展开<i class="el-icon-arrow-down zhankai"></i></el-button>
      <el-button style="color:#6E92E9;" v-if="!unfold" @click="clickPackUp()" type="text">收起<i class="el-icon-arrow-up zhankai"></i></el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <!-- <el-form :inline="true" class="queryFormItem">
          <el-form-item label="录入类型">
            <el-select v-model="params.certificateType" style="width:100%">
              <el-option
                v-for="item in certificateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="validityType" @change="selectval" style="width:100%">
              <el-option
                v-for="item in validityTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="params.name" placeholder="请填写姓名"></el-input>
      </el-form-item>
      <el-form-item>
      <!-- <el-button size="medium " @click="restForm()">清空</el-button> -->
      <!-- <el-button class="itemButtons" type="primary" size="medium " @click="clickDataFormSubmit()">搜 索</el-button>
      <el-button type="primary" size="small" class="chongzhi" icon="el-icon-refresh-right" @click="queryAll()">重置</el-button>
      <el-button class="itemButtons" type="primary" size="small" v-if="isAuth('certificate:certificateRenewalInfo:list')" icon="iconfont iconsoushuo" @click="queryHandle()">高级搜索</el-button>
      </el-form-item>
      <el-form-item class="itemButton">
        <el-button :class='{"sangeyuenei":sanButton==1,"sangeyueneiB":sanButton==2}'  size="small" v-if="isAuth('certificate:certificateRenewalInfo:list')" icon="el-icon-bell" @click="updateParams(0)">三个月内到期</el-button>
        <el-button :class='{"yidaoqi":yiButton==1,"yidaoqiB":yiButton==2}'  size="small" v-if="isAuth('certificate:certificateRenewalInfo:list')" icon="el-icon-warning-outline" @click="updateParamsb(0)">一个月内到期</el-button>
        <!-- <el-button :class='{"yidaoqi":yiButton==1,"yidaoqiB":yiButton==2}'  size="small" v-if="isAuth('certificate:certificateRenewalInfo:list')" icon="font_family icon-cuowude" @click="updateParams(-1)">  已逾期</el-button> -->
        <!-- <el-button :class='{"yiyuqi":yuButton==1,"yiyuqiB":yuButton==2}' size="small" icon="font_family icon-cuowude" @click="updateParams(-1)">  已逾期</el-button>
      </el-form-item>
    </el-form> -->
    <div class="div-e">
      <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>证书延期</h3>
        </div>

        <div class="div-button">
        <el-button  class="div-buttonItemc" size="mini" type="primary" plain icon="el-icon-edit-outline" @click="clickHangShou()">数据导出</el-button>


        </div>

        </div>
        <div class="radio-s">
        <span class="yujing">预警状态</span>
         <el-radio @change="changeRadioa" v-model="radioa" :label='3'>三月内到期</el-radio>
         <el-radio @change="changeRadiob" v-model="radioa" :label="1">一月内到期</el-radio>
         <el-radio @change="changeRadioc" v-model="radioa" :label="-1">已逾期</el-radio>
        </div>
      <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.code" v-for="item in editableTabs" :key="item.code">
          <certificate-type @clickCertificateListVisible="clickCertificateListVisible" ref="child" :months="months" :params="params"></certificate-type>
      </el-tab-pane>
    </el-tabs>
    </div>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
  </div>
  <certificate-detail v-if="!certificateListVisible" :flag="flag" :visId="visId"></certificate-detail>
</div>
</template>

<script>
  import merge from 'lodash/merge'
  import CertificateType from './certifirenewal/certifirenewal-type'
  import QueryModel from './certifirenewal/query-model'
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  import CertificateDetail from './certinfo/certificate-list-detail'
  import { eventBus } from '../../../../eventBus'

  export default {
    data () {
      return {
        labelPosition:'right',
        conceal:false,
        concealName:false,
        concealNameCol:false,
        unfold:true,
        kiveList:false,
        queryModelVisible: false,
        certificateListVisible: true,
        certificateinfoCrashVisible: false,
        flag: false,
        activeName: '',
        loading: true,
        dataEmpty: true,
        userCol:1,
        userName:'',
        months: 3,
        radioa:3,
        visId:{},
        pickerOptionsValidityEndTime: {
           disabledDate: (time) => {
              return time.getTime() < this.params.releaseTime
            }
        },

        pickerOptionsValidityEndTimeA: {},
        // sanButton:1,
        // yiButton:1,
        // yuButton:1,
        editableTabs: [],
        confInfos: [],
        treeData: [],
        professions: [],
        statuses:[
          {label: '全部', value:''},
          {label:'空闲', value:0},
          {label:'挂出', value:1},
          {label:'投标', value:21},
          {label:'项目', value:22},
          {label:'中标', value:23},
          {label:'其他', value:24},
        ],
        registerTypes: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 0,
          label: '否'
        }, {
          value: 1,
          label: '是'
        }, {
          value: 2,
          label: '非注册类证书'
        }],
        index: 0,
        params: {
          certificateType:'',
          status:'',
          keepDeptId: '',
          name: '',
          pidType:'all',
          profession:'',
          idType: '',
          idCard: '',
          certificateNo: '',
          mobile: '',
          academic: '',
          releaseTime: '',
          validityEndTime: '',
          validityType: '',
          registerType:''
        },
        validityType:'',
        academics: [
          {
          value: '',
          label: '全部'
        },
        {
          value: '博士',
          label: '博士'
        }, {
          value: '硕士',
          label: '硕士'
        }, {
          value: '本科',
          label: '本科'
        }, {
          value: '专科',
          label: '专科'
        }, {
          value: '高职高专',
          label: '高职高专'
        }, {
          value: '中专',
          label: '中专'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '小学',
          label: '小学'
        }, {
          value: '其他',
          label: '其他'
        }],
        certificateTypes: [
          {
          value: '',
          label: '全部'
        },{
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        },
        {
          value: 3,
          label: '非在职员工'
        }
        ],
        validityTypes: [
          {
           label: '全部',
           value: ''
          },
          {label: '三个月内到期', value: 3},
          {label: '一个月内到期', value: 1},
          {label: '已逾期', value: -1}
        ],
      }
    },
    components: {
      ElTreeSelect,
      CertificateType, QueryModel, CertificateDetail,
    },
    created () {
      // console.log(123333);
      // this.showNotice()
      this.changeRadioa()
      this.getUserName()
      this.initOrgTree()
      this.initJobs()
      this.clickPackUp()
    },
    mounted () {
      this.initJobs()
      eventBus.$on('certificateinforenewal',(msg)=>{
        this.kiveList = msg
        this.clickKive()
      })
    },
    watch: {
      activeName (n, o) {
        this.$refs.child[this.index].init(n)
      },
      params () {
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      }
    },
    methods: {
         clickHangShou(){

          this.$http({
          url: this.$http.adornUrl('/certificate/certificateRenewalInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          // params: this.$http.adornParams(merge(this.params, {
          //   'status': this.flag ? 'crash' : this.params.status
          // })),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '证书延期信息统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })

      },
      blurValidityEndTime(){
        if(this.params.validityEndTime !== ''){
        this.pickerOptionsValidityEndTimeA = {
           disabledDate: (time) => {
              return time.getTime() > this.params.validityEndTime
            }
        }
        }else{
          this.pickerOptionsValidityEndTimeA = {}
        }
      },
      clickKive(){
      if (this.kiveList) {
        // this.certificateListVisibleDetail = false
        this.certificateListVisible = true
        // this.certificateinfoCrashVisible = false
      }
      },
      changeRadioa(label){
      console.log(label);
      this.months = 3
      this.params.validityType = 2
      this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
      })

      },
      getUserName(){
      this.$http({
          url: this.$http.adornUrl('/sys/user/info'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userName = data.user.name
            console.log(this.userName);
            console.log('UOO51');
          }
        })
      },
      changeRadiob(label){
      console.log(label);
      this.months = label
      this.params.validityType = 2
      this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })

      },
      changeRadioc(label){
      console.log(label);
      this.params.validityType = label
      this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      },
      clicKunfold(){
      this.conceal = true
      this.unfold = false
      if(this.userName !== 'admin'){
      this.concealName = true
      }else{
        this.concealName = false
        this.concealNameCol = true
        this.userCol = 2
      }
      this.$refs.child[this.index].unfoldHeight()
      },
      clickPackUp(){
      this.conceal = false
      this.concealName = false
      this.concealNameCol = false
      this.unfold = true
      this.$refs.child[this.index].tackHeight()
      },
      selectval(value){
      if(value === 0){
        this.params.validityType = 0
        this.months = 3
      }
      if(value === 2){
        this.params.validityType = 0
        this.months = 1
      }
      },
      handleClick (tab, event) {
        this.activeName = tab.name
        this.index = tab.index
        if(this.conceal){
          this.clicKunfold()
        }else{
          this.clickPackUp()
        }
      },
      routerBack(){
      this.certificateListVisible = true
      this.queryAll()
      },
      clickDataFormSubmit(){
      this.$refs.child[this.index].getDataListList()
      },
      clickCertificateListVisible(row){
      this.visId = row
      this.certificateListVisible = false
      // console.log(id);
      },
      queryAll(){
        this.params = {
          certificateType: '',
          name: '',
          validityType: ''
        },
        this.sanButton = 1,
        this.yiButton = 1
      },
      setParams (params) {
        this.params = params
      },
      updateParams (validityType) {
        this.params.validityType = validityType
        if(validityType === 0){
          this.months = 3
          this.sanButton = 2
          this.yiButton = 1

        }
        if(validityType === -1){
          // this.months = 3
          this.yiButton = 1
          this.sanButton = 1
          this.yuButton = 2
        }
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      jobChange(value, item){
        this.confInfos = []
        this.professions = []
        this.params.idType = ''
        this.params.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.confInfos = data
          }
        })
      },
      confChange(value, item){
        this.professions = []
        this.params.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      },
      updateParamsb(validityType){
        this.params.validityType = validityType
        if(validityType === 0){
          this.months = 1
          this.sanButton = 1
          this.yiButton = 2
          this.yuButton = 1
        }
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      },
      initJobs () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            this.editableTabs[0].code = 'all'
            setTimeout(() => {
              this.activeName = 'all'
            })
          }
        })
      },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      // 全部
      restForm(){
      // this.params = {}
      this.params = {
          certificateType: '',
          name: '',
          validityType: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
.div-buttonItemc{
  float: right;
}
.col-essss{
}
/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;

     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;

        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5 !important;
  margin:0px 0px 8px 0px !important;
// .el-tabs__nav-wrap.is-scrollable{
//  padding:0px !important;
// }
  }
  }
.yujing{
  margin-right: 15px;
}
.queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.radio-s{
  width: 100%;
  height: 45px !important;
  display: flex;
  align-items: center;
  // background-color: red;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.in-t{
  // width: 100%;
  float: left;
  height: 45px;
  // margin-top: 15px;
  display: flex;
  align-items: center;
  h3{
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
.zhankai{
  margin-left: 7px;
}
.div-buttonItemb{
  float: right;
}
.div-buttonItema{
  float: right;
  margin-right: 8px;
}
.row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}

/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
    .mod-config{
    padding: 15px !important;
    background-color: #F5F7FA;
    // margin-top: 48px;
    }
    .itemButton{
    width: 100%;
    margin-top: 10px !important;
    // margin-bottom: 10px;
}
   /deep/.sangeyuenei{
       color: #e6a23c;
       border: #e6a23c 1px solid;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .sangeyuenei:hover{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.sangeyueneiB{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yidaoqi{
     color: #f56c6c;
     border: solid #f56c6c 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .yidaoqi:hover{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.buttonItem{
  font-size: 14px !important;
  i{
    font-size: 14px;
  }
  }
   /deep/.yidaoqiB{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .el-button--warning{
    background: #fff !important;
    border-color: #e6a23c !important;
    color:#e6a23c !important;
   }
   .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
    color: #e6a23c !important;
    background: #fdf6ec !important;
    border-color: #f5dab1 !important;
   }
   .el-button--danger{
    background: #fff !important;
    border-color: #f56c6c !important;
    color:#f56c6c !important;
   }
   .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
    color: #f56c6c !important;
    background: #fef0f0 !important;
    border-color: #fbc4c4 !important;
   }
   .weidaoqi{
     color: #409eff;
     border-color: #409eff;
     font-size: 14px;
   }
   /deep/.chongzhi{
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .itemButtons{
     font-size: 14px;
   }
    .el-card__body {
      padding: 10px 10px;
    }
    .picturess{
      font-size: 16px !important;
    }
    // .el-icon-bell{
    //  font-size: 16px;
    // }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryFormItem{
      margin-top: 8px !important;
      // margin-bottom: 5px !important;
    }
    .queryFormItem .el-form-item{
      margin-bottom: 0px !important;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .el-button--info {
      color: #1b92fb;
      background-color: #fff;
      border-color: #1b92fb;
    }
       /deep/.yiyuqi{
     color: #C0C4CC;
     border: solid #C0C4CC 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .yiyuqi:hover{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yiyuqiB{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
</style>
